<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="identifier" label="Identifier" width="300"></el-table-column>
    <el-table-column prop="title" label="Title" width="200"></el-table-column>
    <el-table-column prop="filename" label="Filename" width="200"></el-table-column>
  </el-table>
  <div class="item">
    <el-button type="primary" @click="handleClick">查看插件</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { invoke } from '@tauri-apps/api/tauri';

const tableData = ref([]);
// 获取数据并赋值给 tableData
const fetchData = async () => {
  try {
    const inputText = ref('some_input_text');  // 根据需要设置 inputText 的值
    // 主动调用异步函数获取数据
    const result = await invoke<string>('run_python_script_json', { input: inputText.value });
    // 假设返回的 result 是 JSON 格式的数据，解析并赋值给 tableData
    tableData.value = JSON.parse(result);
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
};

  // 在组件挂载时自动调用 fetchData 获取数据
onMounted(() => {
  fetchData();
});

  // 点击事件处理函数
const handleClick = async () => {
  const result = await invoke<string>('show_in_finder');
};
</script>

<style scoped>
/* 可根据需要自定义样式 */
.item {
  margin-top: 10px;
}
</style>
